<template>
<div>

  <el-button type="primary" icon="el-icon-lx-add"  @click="dialogVisible = true">新建</el-button>

  <el-dialog
    :modal="false"
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <el-form ref="addHotel" :rules="rules" :model="addHotel" label-width="100px" >
      <el-form-item label="所属城市:" prop="cityId">
        <el-select v-model="addHotel.cityId" placeholder="请选择" @change="getCitySelect">
          <el-option
            v-for="item in cityList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="酒店名称:" prop="hotelName">
        <el-input v-model="addHotel.hotelName"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="saveHotel('addHotel')">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>

    </el-form>
  </el-dialog>

  <el-table
    :data="hotelList"
    border
  >
    <el-table-column
      fixed
      prop="id"
      label="编号"
    >
    </el-table-column>
    <el-table-column
      prop="cityName"
      label="所在城市"
    >
    </el-table-column>
    <el-table-column
      prop="hotelName"
      label="酒店名称"
    >
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间"
    >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
    >
      <template slot-scope="scope">
        <el-button @click="getRoomView(scope.row)"   size="small">查看</el-button>
        <el-button type="danger" size="small"  @click="removeRoom(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

<!--  <el-pagination-->
<!--    background-->
<!--    layout="prev, pager, next"-->
<!--    :current-page="currentPage"-->
<!--    :page-size="size"-->
<!--    :total="total"-->
<!--    @current-change="searchHotel">-->
<!--  </el-pagination>-->
</div>
</template>

<script>
  export default {
    name: 'HotelManage',
    methods: {
      handleClick(row) {
        alert(row.id);
      }
    },
    data(){
      return{
        rules: {
          cityId: [
            {
              required: true,
              message: '请选择城市',
              trigger: 'change'
            },
          ],
          hotelName:[
            {
              required: true,
              message: '请填写酒店名称',
              trigger: 'blur'
            }
          ]

        },
        addHotel:{
          id:'',
          cityId:'',
          hotelName:'',


        },
        cityId:'',
        hotelList:[],
        cityList:[],
        dialogVisible:false,
        total:0,
        pages:1,
        size:10,
        currentPage:1,
      }
    },
    created () {
      var _this = this;
      _this.$http.post('http://8.135.35.123:9000/hotelsystem/hotelName/list').then(function (res) {
        if(res.data.code==80200){
          _this.hotelList = res.data.data.records;
          _this.total = res.data.data.total;
          _this.pages = res.data.data.pages;
          _this.size = res.data.data.size;
          _this.currentPage = res.data.data.current;
        }
      })
      _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/citylist').then(function (res) {
        if(res.data.code==80200){
          _this.cityList = res.data.data;
        }
      })
    },
    methods:{
      searchHotel(currentPage){

      },
      saveHotel(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var vo = new URLSearchParams()
            // vo.append('id', this.addHotel.id);
            vo.append('cityId', this.addHotel.cityId);
            vo.append('hotelName', this.addHotel.hotelName);
            var _this = this;
            _this.$http.post('http://8.135.35.123:9000/hotelsystem/hotelName/add',vo).then(function (res) {
              if (res.data.code == 80200) {
                alert(res.data.msg);
                location.reload();
              } else {
                alert(res.data.msg);
              }
            })
          }else {

          }
        })
      },
      getCitySelect(val){
        var _this = this;
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/hotellist?cityId=' + val).then(function (res) {
          if (res.data.code == 80200) {
            _this.form.hotelList = res.data.data;
          } else {
            alert(res.data.msg);
          }
        })
      },
    }
  }
</script>

<style >

</style>
